<template>
    <el-main class="container-settings">

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="上传头像">
            <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>

          <el-form-item label="手机号">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio label="true">男</el-radio>
              <el-radio label="false">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="个性签名">
            <el-input type="textarea" v-model="form.signature"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">设置</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
    </el-main>
</template>
<script>

export default {
  data() {
    return {
      form: this.userDetail,
      imageUrl: '', // 用于显示缩略图的URL
      uploadUrl: '/your-upload-url' // 替换为你的上传URL
    }
  },
  props: {
    userDetail:{}
  },
  methods: {
    handleAvatarSuccess(response, file) {
      this.imageUrl = URL.createObjectURL(file.raw); // 将上传的文件转换为URL以显示缩略图

    },
    beforeAvatarUpload(file) {
      this.imageUrl=  window.webkitURL.createObjectURL(file);
      this.from.avatar= this.imageUrl;
      return true;
    },
    onSubmit(){

    }
  },
}
</script>
<style scoped>
.container-settings{
  width: 95%;
  height: 100%;
  margin-left: 5%;
  margin-right: 5%;
}
.container-settings-header{
  width: 100%;
}


.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #f5f7fa;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  cursor: pointer;
}

.avatar {
  width: 100%;
  height: 100%;
}
</style>